<template>
	<modal :showModal="showAgreementModal">
		<view id='agreement' class="agreement-wrap" :class="[showAgreementModal ? 'show':'']">
			<view class="title line_center">劳动协议</view>
			<scroll-view class="content" scroll-y="true" @scrolltolower='scrollEndEv' v-if='showAgreementModal'>
				<view class="con-item">
					<rich-text :nodes="content"></rich-text>
				</view>
			</scroll-view>
			<view class="tip">如您已详细阅读并同意以上条款请点击“同意”开始使用我们的服务</view>
			<view class="btn-wrap">
				<view class="btn btn1 line_center" @tap='close'>取消</view>
				<!-- :disabled="isDisabled" -->
				<view class="btn btn2 line_center" :class="[isDisabled ? 'disabled-color':'']" @tap='agree'>知晓且同意</view>
			</view>
		</view>
	</modal>
	
</template>

<script>
	const app = getApp();
	import modal from '../modal/modal.vue';
	export default {
		name:"agreement",
		components:{
			modal,
		},
		props:{
			showAgreementModal:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				content:'',
				isDisabled:true,
				scrollTop:0,
			};
		},
		mounted() {
			this.getAgreement();
		},
		methods:{
			refresh(){
				this.isDisabled = true;
				this.content = '';
				this.getAgreement()
			},
			scrollEndEv(){
				if(this.isDisabled){
					this.isDisabled = false;
				}
			},
			getAgreement(){
				let that = this;
				uni.showLoading({
					title:'加载中...',
					mask:true
				})
				app.globalRequest({
					api:app.getApi().loginApi.getxieYi,
					data:{
						type:4,
					}
				}).then(res=>{
					if(res.code == 1){
						that.content = res.data.xieyi.content ? res.data.xieyi.content.replace(/\<img/gi, '<img style="max-width:100%"'):'';
					}
				}).catch(err => {
					
				})
			},
			close(){
				this.$emit('close');
			},
			agree(){
				if(this.isDisabled){
					uni.showToast({
						title:'请阅读并同意本协议！',
						icon:'none'
					})
					return;
				}
				app.globalRequest({
					api:app.getApi().user.readXieYi,
					method:'POST'
				}).then(res=>{
					if(res.code == 0){
						this.$emit('agree')
					}
				}).catch(err => {
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.agreement-wrap{
		width: 702rpx;
		height: 1000rpx;
		box-sizing: border-box;
		background: $dis-con-color;
		border-radius: 28rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		right:0;
		top:0;
		margin:auto;
		opacity: 0;
		transition: all 0.3s ease-in-out;
		z-index:222;
	}
	.show{
		opacity: 1;
		// transform: translate3d(0, 0, 0);
	}
	.title{
		width:100%;
		height: 88rpx;
	}
	.content{
		width:100%;
		height:680rpx;
		.con-item{
			padding: 0 24rpx;
		}
	}
	.tip{
		padding:20rpx 24rpx;
		color:$dis-font-color;
	}
	.btn-wrap{
		margin:0 24rpx;
		display: flex;
		justify-content: space-between;
		.btn{
			width: 300rpx;
			height: 84rpx;
			border-radius: 42rpx;
			font-size: 32rpx;
		}
		.btn1{
			border: 2rpx solid $dis-font-color;
		}
		.btn2{
			background: $dis-font-color;
			color:#fff;
		}
		.disabled-color{
			background: rgba(255,43,75,0.5);
		}
	}
</style>